import Taro,{ Component, Config } from '@tarojs/taro';
import { View, Image,Text } from '@tarojs/components';
import {AtList, AtListItem} from "taro-ui";

import './Collage.scss'
import img from '../img';

 class Collage extends Component {

  config: Config = {
    navigationBarBackgroundColor: '#ff4b82',
    navigationBarTextStyle: "white",
    navigationBarTitleText: '学院'
  };

  state={
    entrance:[
      {title:'常见问题',url:''},
      {title:'使用教程',url:''},
      {title:'推广问题',url:''},
      {title:'提现问题',url:''},
    ],
    list:[
      '已经签收的订单为什么会失效',
      '为什么领券的时候提示优惠券失效？',
      '如何成为商家？',
      '如何通过折草APP赚钱？',
      '已下单支付成功，但收益订单中未显示？',
      '如何成为达人？',
      '如果当月25号忘了体现，以后还可以吗？',
    ]
  };

   godetail = id =>{
     Taro.navigateTo({
       url: '/pages/problem/problem?id='+id
     })
   };

  render() {
    const {entrance,list}=this.state;
    return(
      <View>
        <View className='entranceBox'>
          {
            entrance.map((EItem,index)=>(
              <View className='entranceItem' key={index}>
                <Image className='entranceImg' src={img.icon4}/>
                <Text>{EItem.title}</Text>
              </View>
            ))
          }
        </View>
        <View className='questionList'>
          <View className='questionTitBox'>
            <View className='dot'/>
            <View className='questionTit'>热门问题</View>
          </View>
          <View className='content'>
            {
              list.map((item,index)=>(
                <AtList key={index} >
                  <AtListItem
                    title={item}
                    arrow='right'
                    hasBorder={false}
                    onClick={this.godetail.bind(this,index)}
                  />
                </AtList>
              ))
            }
          </View>
        </View>
      </View>
    )
  }
}

export default Collage;
